<template>
  <div id="comment">
    <el-row>
      <el-col :span="16">
        <el-row  v-for="(o, index) in comments" key="o">
          <el-col :span="24">
            <el-card style="width: 820px; ">
              <el-row>
                <el-col :span="2">
                  <el-avatar :size="size" :src="o.userPhoto"></el-avatar>
                </el-col>
                <el-col :span="18">
                  <el-row>
                    <span style="font-size: 15px;">{{ o.name }}</span>
                  </el-row>
                  <el-row>
                    <el-rate v-model="o.averageScore" disabled></el-rate>
                  </el-row>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22" :offset="2">
                  <span style="font-size: 12px;">{{ o.content }}</span>
                  <el-link v-if="!o.replay" @click="showReply(o.id)" type="primary" style="float: right;">回复</el-link>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="22" :offset="2" style="margin-top: 5px;">
                  <el-image v-for="imgUrl in o.imgs"
                        style="width: 100px; height: 100px; margin-right: 10px;"
                        :src="imgUrl"
                        :fit="fit">
                  </el-image>
                </el-col>
              </el-row>
              <el-row v-if="o.replay && o.replay !== ''">

                <el-col :span="22" :offset="2">
                  <el-divider></el-divider>
                  <span style="12px">商家回复：{{o.replay}}</span>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6" style="margin-left: 40px; margin-top: 20px;">
        <el-card class="box-card data-card">
          <div slot="header" class="clearfix">
            <span>待处理反馈</span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="14" :offset="7">
                  <span
                    style="color: gray; font-size: 50px;font-family: Arial, Helvetica, sans-serif;text-align: center;">
                     {{ commentCount.lowScore }}
                  </span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14" :offset="6">
                  <span>未回复差评</span>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12" style="text-align: center;">
              <el-row>
                <el-col :span="12" :offset="5">
                  <div style=" color: #ffaa00; font-size: 50px; font-family: Arial, Helvetica, sans-serif; ">
                    {{ commentCount.notReplied }}
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="14" :offset="5">
                  <span>未回复评价</span>
                </el-col>
              </el-row>
            </el-col>
          </el-row>




        </el-card>
      </el-col >
    </el-row>
    <el-row>
      <el-dialog
        title="回复评论"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入回复内容"
          v-model="reply.replay">
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="replyComment">回 复</el-button>
        </span>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'Comment',
    data() {
      return{
        dialogVisible: false,
        reply: {
          id: null,
          replay: ""
        },
        score: "5",
          userscore:"4",
          // comments:[{
          //     name:"王豆豆",
          //     userscore:"5",
          //     content:"送货真的快得让我尴尬 点好还没起床就到了。黄金咖喱猪排是新品吧，肉很多，好吃!",
          //     imgs:[
          //       ],
          //     replay: "爱吃吃 不吃爬"
          //   },
          //   {
          //     name:"冯豆豆",
          //     userscore:"4",
          //     content:"猪肉好吃!",
          //     imgs:[
          //       "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          //       "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          //     ]

          //   }

          // ],
          circleUrl: "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          url:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          comments: [],
          commentCount: {},
      }
    },
    methods:{
      getCommentCount() {
        this.$http.get("/commentInfo/count")
        .then(resp => {
          if (resp.data.code == 200) {
            this.commentCount = resp.data.data;
          }
        })
      },
      showReply(id) {
        this.reply.id = id;
        this.dialogVisible = true;
      },
      replyComment() {
        this.$http.post("/commentInfo/replay", this.reply)
        .then(resp => {
          alert(resp.data.message);
          this.dialogVisible = false;
          this.getCommentCount();
          this.initComment();
        })
      },
      initComment() {
        this.$http.post("/commentInfo/search", {}).then(resp => {
          if (resp.data.code == 200) {
            this.comments = resp.data.data.list;
          }else{
            this.$message.error(resp.data.message)
          }
        })
      }
    },
    created(){
      this.initComment();
      this.getCommentCount();
    }
  }
</script>

<style scoped>

</style>
